<template>
	<view class="main-content">
		<u-form :model="form" id="form-container">
			<u-form-item label="员工工号" label-width=150>
				<u-input v-model="jobNumber" placeholder="请输入员工工号" border clearable></u-input>
			</u-form-item>
			<u-form-item class="checkBtn">
				<u-button type="success" size="medium" @click="search()">查询</u-button>
			</u-form-item>
		</u-form>
		<view class="table-content">
			<view class="hintInfo" v-if="pullDown">————下拉获取信息————</view>
			<view class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
				<view class="list-item">
					<view>员工工号</view>
					<view>{{item.jobNumber}}</view>	
				</view>
				<view class="list-item">
					<view>领导工号</view>
					<view>{{item.landerJobNumber}}</view>	
				</view>
				<view class="list-item">
					<view>原因</view>
					<view class="content">{{item.content}}</view>	
				</view>
				<view class="list-item">
					<view>分数</view>
					<view>{{item.score}}</view>	
				</view>
				<view class="list-item">
					<view>记录时间</view>
					<view>{{item.createTime}}</view>	
				</view>
				<view class="flex u-row-center" v-if="userInfo.roleId == 23 || userInfo.roleId == 24">
					<u-button size="medium" type="warning" @click="dealFunc(item.id,index)">删除</u-button>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { findManagerQualityScore,delManagerQualityScore,accessPersonInfo } from '../utils/index.js'
	export default {
		data() {
			return {
				records: [],							//品质系数奖励与扣罚表单
				pullDown: true,							//使能当前页面的下拉刷新功能
				form: {
					page:1,
					limit: 10,
					landerJobNumber: ''
				},
				jobNumber: '',
				userInfo: {},
				nomore: false
			}
		},
		methods: {
			search(){
				this.records = []
				this.form.page = 1
				this.nomore = false
				this.checkList()
			},
			//获取品质系数奖励与扣罚列表
			async checkList() {
				if(this.nomore) return
				const query = Object.assign({},this.form)
				console.log(this.userInfo)
				query.landerJobNumber = this.userInfo.jobNumber
				if(this.jobNumber){
					query.jobNumber = this.jobNumber
				}
				const { data } = await findManagerQualityScore(query)
				if(data.code != '1') return
				if(!data.data.list){
					this.pullDown = false
					return
				}
				this.records = this.records.concat(data.data.list)
				this.form.page++
				if(this.form.page>data.data.limit) {
					this.nomore = true
				}
				this.pullDown = false
			},
			// 下拉刷新,即调用查询按钮绑定的函数
			onPullDownRefresh() {
				this.records = []
				this.form.page = 1
				this.nomore = false
				this.checkList()
				setTimeout(function() {
					uni.stopPullDownRefresh()
				},2000)
			},
			// 删除品质系数奖励与扣罚记录
			async dealFunc(id,index) {
				const {data} = await delManagerQualityScore({id,landerJobNumber:this.userInfo.jobNumber})
				const errMsg = data.msg
				if(data.code == '1'){
					this.records.splice(index, 1)
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 获取个人信息的函数
			async getUserInfo(){
				const {data} = await accessPersonInfo()
				this.userInfo = Object.assign({},data.data)
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onReachBottom(){
			this.checkList()
		}
	}
</script>

<style>
	.main-content {
		width: 100%;
		margin-top: 20rpx;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}
	// 列表信息块外层包裹器
	.list-item-wrapper {
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFEFD5;
	}
	// 列表信息块的样式
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	// 按钮样式
	.operateBtn {
		display: flex;
		flex-wrap: nowrap;
	}
	.hintInfo {
		display: flex;
		justify-content: center;
		color: #E0E0E0;
	}
	.content{
		max-width: 450rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
	}
</style>
